<template>
	<transition name="show">
		<div class="foot" v-show="!ctrlOff">
			<div class="route">  <!-- 来源解析 -->
				<router-link to="/routes"></router-link>
			</div>
			<div class="count">  <!-- 图标展示 -->
				<router-link to="/counts"></router-link>
			</div>
			<div class="meteo">  <!-- 预报图展 -->
				<router-link to="/meteos"></router-link>
			</div>
		</div>
	</transition>
</template>


<script>

import ctrl from '../propsCtrl'     // 兄弟组件之间通信的控制器 中央事件总线

export default {
	data(){
		return {
			ctrlOff: false
		}
	},
    mounted(){      // vue实例化钩子 组件被挂载钩子
        ctrl.$on("ctrlOffEvent", (state) => {   // 监听事件 使用自定义事件使兄弟组件之间通信
            this.ctrlOff = state
        })
    }

}

</script>


<style lang="less" scoped>
.show-enter,.show-leave-to{
	opacity: 0;
	transform: translateY(100%);
}
.show-enter-active,.show-leave-active{
    transition: all 0.5s;
}
.show-enter-to,.show-leave{
	opacity: 1;
	transform: translateY(0%);
}



.foot{
	width: 100%;
	height: 56px;
	background: #2bb8aa;
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	.route{
		flex-grow: 1;
		a{
			display: inline-block;
			width: 100%;
			height: 56px;
			background: url('a.svg') center center no-repeat;
			background-size: 32px;
		}
		.router-cur{
			background: url('a2.svg') center center no-repeat;
			background-size: 32px;			
		}
	}
	.count{
		flex-grow: 1;
		a{
			display: inline-block;
			width: 100%;
			height: 56px;
			background: url('b.svg') center center no-repeat;
			background-size: 32px;			
		}
		.router-cur{
			background: url('b2.svg') center center no-repeat;
			background-size: 32px;			
		}
	}
	.meteo{
		flex-grow: 1;
		a{
			display: inline-block;
			width: 100%;
			height: 56px;
			background: url('c.svg') center center no-repeat;
			background-size: 32px;
		}
		.router-cur{
			background: url('c2.svg') center center no-repeat;
			background-size: 32px;			
		}
	}
}


</style>